<template>
  <!--
  @name: HyElUpload
  @data: 2024/4/17 11:36
  二次封装上传组件
-->
  <div id="hy-el-upload">
    <span v-if="props.isReadonly">我是文件</span>
    <el-upload
      v-else
      class="upload-demo"
      :action="props.url"
      :file-list="fileList"
      :show-file-list="props.showFileList"
      :disabled="props.disabled"
      :drag="props.drag"
      :name="props.uploadField?props.uploadField:'file'"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-success="onSuccess"
      :on-error="onError"
      :on-progress="onProgress"
      :on-change="onChange"
      :on-exceed="onExceed"
      :before-upload="beforeUpload as any"
      :before-remove="beforeRemove as any"

    >
      <!--注意,这里我们使用动态组件-->
      <template v-if="props.customComponent">
        <component :is="props.customComponent"></component>
      </template>
      <template v-else>
        <el-button :size="props.size" type="primary">{{props.uploadBtnTitle?props.uploadBtnTitle:"上传"}}</el-button>
      </template>
      <!--<el-button type="primary">Click to upload</el-button>-->
      <template #tip>
        <div class="el-upload__tip">
          {{promptInformation}}
        </div>
      </template>
      <!--   表示支持拖拽   -->
<!--      <template v-if="props.drag">-->

<!--      </template>-->
      <!--   不支持拖拽,此时我们仅暂时一个按钮   -->
<!--      <template v-else>-->

<!--      </template>-->
<!--      <el-button type="primary">Click to upload</el-button>-->
<!--      <template #tip>-->
<!--        <slot name="tip">-->
<!--&lt;!&ndash;          <div class="el-upload__tip">&ndash;&gt;-->
<!--&lt;!&ndash;            jpg/png files with a size less than 500KB.&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--        </slot>-->
<!--      </template>-->
    </el-upload>
  </div>

</template>
<script setup lang="ts">
import type {UploadFile, UploadFiles, UploadUserFile,UploadProgressEvent,UploadRawFile} from "element-plus";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import type {HyElUploadInterface} from "@/interface/HyFormInterface";
import {downloadFile} from "@/components/utils";

const props = defineProps<HyElUploadInterface>();
const form = defineModel("form", {
  type: Object,
  default: () => {
  },
});
/** json配置穿过来的文件列表 */
const fileList = ref<UploadUserFile[]>(props.fileList as any);
/** 文件字段列表. 当传入name时,才有效, */
const fileFieldList=ref<string[]>([]);

init();

/** 初始化 */
function init() {
  if (props.splicingSymbol){
    form.value[props.field]=fileFieldList.value.join(props.splicingSymbol);
  }
}

/**
 * 接下来是几个方法是element-plus的文件处理方法,
 * 我们这里只抛出一个onChange方法
 * 理由是让使用者尽可能少的写代码
 *
 */
function onExceed(files: File[], uploadFiles: UploadUserFile[]) {
  if (props.onExceed){
    props.onExceed(files,uploadFiles);
  }

  // console.error("文件超出", files, uploadFiles);
  // ElMessage.warning("超出文件列表限制");
}

/**
 * 点击文件列表中已上传的文件时的钩子
 * 一般用于下载
 * @param uploadFile
 *
 */
function onPreview(uploadFile: UploadFile){
  console.log(112, uploadFile);
  if (props.name){

  }
  if(props.isDownloadFile){
    /** 这里的下载字段还需要我们再定义一个属性 */
    console.log(91, uploadFile);
    if (props.fileUrlNameField){
      // downloadFile(fileList.value)
      if (props.fileUrlNameField){
        // @ts-ignore
        downloadFile(uploadFile[props.fileListNameField],uploadFile[props.fileListNameField].name);
      }
    }
    // downloadFile()
  }
  if(props.onPreview){
    props.onPreview(uploadFile);
  }
}

function onRemove(uploadFile: UploadFile, uploadFiles: UploadFiles) {
  if (props.onRemove){
    props.onRemove(uploadFile,uploadFiles);
  }
}

function onSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
  if (props.name){
    if (response.code===200) {
      if (response.data[props.name]){
        fileFieldList.value.push(response.data[props.name]);
      }else{
        // fileFieldList.value.push(response.data);
        console.error(125, "结果集为空,请检查");
      }
      if (props.splicingSymbol){
        form.value[props.field]=fileFieldList.value.join(props.splicingSymbol);
      }else{
        console.error(127, "缺少splicingSymbol (连接字符) 字段");
      }
    }
  }
  if (props.onSuccess){
    props.onSuccess(response,uploadFile,uploadFiles);
  }
}

function onError(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) {
  if (props.onError){
    props.onError(error,uploadFile,uploadFiles);
  }
}

function onProgress(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) {
  if (props.onProgress){
    props.onProgress(evt,uploadFile,uploadFiles);
  }
}

function onChange(uploadFile: UploadFile, uploadFiles: UploadFiles){
  if (props.onChange){
    props.onChange(uploadFile,uploadFiles);
  }
}

function beforeUpload(rawFile: UploadRawFile) {
  if (props.beforeUpload){
    props.beforeUpload(rawFile);
  }
}

function beforeRemove(uploadFile: UploadFile, uploadFiles: UploadFiles) {
  if (props.beforeRemove){
    props.beforeRemove(uploadFile,uploadFiles);
  }
}

</script>
<style scoped>

</style>
